<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加删除记录练习</title>
    <script type="text/javascript">
        //删除tr的响应函数
        function delA(){
                //点击超链接以后需要删除超链接诶所在的哪行
                //这里我们点击哪个超链接this就是谁
                var tr=this.parentNode.parentNode;//获取当前tr
                var name=tr.children[0].innerHTML; //获取要删除员工的名字
                //删除之前弹出一个对话框
                var flag= confirm("确认删除"+name+"吗?");//confirm()用于弹出一个带确认和取消的对话框
                // alert(flag);//点击确认返回值是true 点击取消返回值是false
                if (flag){
                    tr.parentNode.removeChild(tr);//删除tr
                }
                return false;
            }
        window.onload = function(){
        //点击超链接以后，删除一个员工的信息
         //获取所有的超链接
         var allA=document.getElementsByTagName("a");
        //为每一个超链接绑定一个单击响应函数
            for (var i=0;i<allA.length;i++){
                allA[i].onclick=delA;
            }
        //添加员工的功能 点击按钮以后将员工的信息添加到表格中
            var addEmpButton=document.getElementById("addEmpButton");
            addEmpButton.onclick=function () {
                //获取用户添加的员工信息
                var name=document.getElementById("empName").value;//获取员工的名字
               var  email=document.getElementById("email").value;//获取员工的email
               var salary=document.getElementById("salary").value;//获取员工的salary薪水
                // alert(name+","+email+","+salary);
                /*<tr>
                *   <td>Tom</td>
                *   <td>tom@tom.com</td>
                *   <td>5000</td>
                *   <td><a href="javascript:;">Delete</a></td>
                 *</tr>
                 */
                //获取tr
                var tr=document.createElement("tr");
                //创建4个td
                var nameTd=document.createElement("td");
                var emailTd=document.createElement("td");
                var salaryTd=document.createElement("td");
                var aTd=document.createElement("td");
                //创建一个a
                var a=document.createElement("a");
                //创建文本节点
                var nameText=document.createTextNode(name);
                var emaiText=document.createTextNode(email);
                var salaryText=document.createTextNode(salary);
                var delText=document.createTextNode("Delete");
                //将文本添加到td中
                nameTd.appendChild(nameText);
                emailTd.appendChild(emaiText);
                salaryTd.appendChild(salaryText);
                //向a中添加文本
               a.appendChild(delText);
               //将a添加到td中
                aTd.appendChild(a);
                //将td添加到tr中
                tr.appendChild(nameTd);
                tr.appendChild(emailTd);
                tr.appendChild(salaryTd);
                tr.appendChild(aTd);
                //向a中添加href属性
                a.href="javascript:;";
                //为新添加的a在绑定一个单击响应函数
                a.onclick=delA;
                //获取table的id
                var employeeTable=document.getElementById("employeeTable");
                var tbody=document.getElementsByTagName("tbody")[0];
                //将tr添加到tbody中
                tbody.appendChild(tr);
                //看网页delete下面没有下划线，字体也不是蓝色 a超链接的功能没有了

            };
        };
    </script>
    <style>
        #total {
            width: 450px;
            margin-left: auto;
            margin-right: auto;
        }

        ul {
            list-style-type: none;
        }

        li {
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            margin: 5px;
            background-color: #99ff99;
            float: left;
        }

        .inner {
            width: 400px;
            border-style: solid;
            border-width: 1px;
            margin: 10px;
            padding: 10px;
            float: left;
        }

        #employeeTable {
            border-spacing: 1px;
            background-color: black;
            margin: 80px auto 10px auto;
        }

        th,td {
            background-color: white;
        }

        #formDiv {
            width: 250px;
            border-style: solid;
            border-width: 1px;
            margin: 50px auto 10px auto;
            padding: 10px;
        }

        #formDiv input {
            width: 100%;
        }

        .word {
            width: 40px;
        }

        .inp {
            width: 200px;
        }
    </style>
</head>
<body>
<script>
    /*1.点击超链接之后，超链接会跳转页面 这个是超链接的默认行为，但是我们不希望出现默认行为，可以通过在形影函数的最后
    *  添加一个return false来取消默认行为或者a标签里输入href="javascript:;"也可以
    *2.confirm()用于弹出一个带确认和取消的对话框 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
    *   点击确认返回值是true 点击取消返回值是false
    *
    *
    * */
</script>
<table id="employeeTable" >
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td><!--href="javascript:;取消默认点击a之后的页面跳转 -->
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp? id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>

</body>
</html>
